<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <style type="text/css">
    html,body{
        height: 100%;
    }
    #wrap{
        height: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-flex-flow: column;
    }
    #header{
        text-align: center; 
        background-color: #e62442; 
        color: #fff;
        width: 100%;
    }
    #header h1{
        font-size: 20px; 
        height: 50px; 
        line-height: 50px; 
        margin: 0em; 
        color: #fff;
    }
    #main{
        -webkit-box-flex: 1; 
        -webkit-flex: 1;
    }
    #footer{
        height: 30px; 
        line-height: 30px;
        background-color: #81a9c3; 
        width: 100%;
        text-align: center;
    }
    #footer h5{
        color: white;
    }
    .con{
        font-size: 28px; 
        text-align: center;
    }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1>抢单</h1>
        </div>
        <div id="main">
                
        </div>
        <div id="footer">
            <h5>Copyright &copy;<span id="year"></span> </h5>
        </div>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/zepto.js"></script>
<script type="text/javascript">
    apiready = function(){
        $api.fixStatusBar(header);
        var header_arr = ['抢单','订单','扫码','收入','我的'];
        NVTabBar = api.require('NVTabBar');
        NVTabBar.open({
            styles: {
                bg: '#f8f8f8',
                h: 50,
                dividingLine: {
                    width: 0.5,
                    color: '#e6e6e6'
                },
                badge: {
                    bgColor: '#f50',
                    numColor: '#fff',
                    size: 6.0,
                    fontSize:10 //数字类型,设置徽章字体大小,默认10。注意:仅支持iOS。
                }
            },
            items: [{
                w: api.winWidth / 5.0,
                bg: {
                    marginB: -5,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 19.0,
                    h: 19.0,
                },
                icon: {
                    normal: 'widget://image/qiang.png',
                    highlight: 'widget://image/qiang_active.png',
                    selected: 'widget://image/qiang_active.png'
                },
                title: {
                    text: '抢单',
                    size: 11.0,
                    normal: '#999999',
                    selected: '#e62442',
                    marginB: 4.0
                }
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: -5,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 19.0,
                    h: 19.0,
                },
                icon: {
                    normal: 'widget://image/order.png',
                    highlight: 'widget://image/order_active.png',
                    selected: 'widget://image/order_active.png'
                },
                title: {
                    text: '订单',
                    size: 11.0,
                    normal: '#999999',
                    selected: '#e62442',
                    marginB: 4.0
                }
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 25,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 50.0,
                    h: 50.0,
                },
                icon: {
                    normal: 'widget://image/add.png',
                    highlight: 'widget://image/add.png',
                    selected: 'widget://image/add.png'
                },
    
            },{
                w: api.winWidth / 5.0,
                bg: {
                    marginB: -5,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 19.0,
                    h: 19.0,
                },
                icon: {
                    normal: 'widget://image/shouru.png',
                    highlight: 'widget://image/shouru_active.png',
                    selected: 'widget://image/shouru_active.png'
                },
                title: {
                    text: '收入',
                    size: 11.0,
                    normal: '#999999',
                    selected: '#e62442',
                    marginB: 4.0
                }
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: -5,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 19.0,
                    h: 19.0,
                },
                icon: {
                    normal: 'widget://image/my.png',
                    highlight: 'widget://image/my_active.png',
                    selected: 'widget://image/my_active.png'
                },
                title: {
                    text: '我的',
                    size: 11.0,
                    normal: '#999999',
                    selected: '#e62442',
                    marginB: 4.0
                }
            }],
            selectedIndex: 0
        }, function(ret, err) {
            if (ret) {
                if(ret.eventType == 'show') {
                    fnFrameGroup();
                }
                if(ret.eventType == 'click' ) {
                    $('#header h1').text(header_arr[ret.index]);
                    if(ret.index == 0) {
                        api.setFrameGroupIndex({
                            name: 'indexGroup',
                            index: 0
                        });
                        api.setFrameGroupAttr({
                            name: 'indexGroup',
                            hidden: false
                        });
                        api.setFrameAttr({
                            name: 'my_frame',
                            hidden:true
                        });
                        api.setFrameGroupAttr({
                            name: 'myOrderFrame',
                            hidden: true
                        });
                    }else if(ret.index == 1) {
                        api.setFrameGroupIndex({
                            name: 'indexGroup',
                            index: 1
                        });
                        api.setFrameGroupAttr({
                            name: 'indexGroup',
                            hidden: false
                        });
                        api.setFrameAttr({
                            name: 'my_frame',
                            hidden:true
                        });
                        //通知一下再打开优惠卷的group页面
                        api.sendEvent({
                            name: 'openOrderGroupEvent',
                            extra: {
                                height : $('#header').height(),
                            }
                        });
                        setTimeout(function(){
                            NVTabBar.bringToFront();
                        },0)
                    }else if(ret.index == 2) {
                        
                    }else if(ret.index == 3) {
                        api.setFrameGroupIndex({
                            name: 'indexGroup',
                            index: 2
                        });
                        api.setFrameGroupAttr({
                            name: 'indexGroup',
                            hidden: false
                        });
                        api.setFrameAttr({
                            name: 'my_frame',
                            hidden:true
                        });
                        api.setFrameGroupAttr({
                            name: 'myOrderFrame',
                            hidden: true
                        });
                    }else {
                        fnOpenMy();
                    }
                }
                NVTabBar.bringToFront();
            }else{
                return;
            }
        });
        
        //指定 navbar
        api.addEventListener({
            name: 'fronNavbarEvent'
        }, function(ret, err) {
            if (ret) {
                NVTabBar.bringToFront();
            } 
        });
    };

    //先打开的framegroup
    function fnFrameGroup() {
        api.openFrameGroup({
            name: 'indexGroup',
            rect: {
                 x: 0, 
                 y: $('#header').height(), 
                 w: 'auto',
                 h: api.winHeight - $('#header').height() - 50
            },
            scrollEnabled: false,
            frames: [{
                name: 'get_order_frame', 
                url: './html/get_order_frame.html',
                bounces : true,
                bgColor: '#f8f8f8'
            },{
                name: 'master_order', 
                url: './html/master_order.html',
                bounces : false,
            },{
                name: 'income_frame', 
                url: './html/income_frame.html',
                bounces : true,
            }]
        }, function(ret, err) {
            if (ret) {
               
            } 
        });
    }

    function fnOpenMy() {
        api.openFrame({
            name: 'my_frame',
            url: './html/my.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: api.winHeight - 50
            },
           
            bounces: true,
            bgColor: '#f8f8f8',
        });
    }
</script>
</html>